<template>
  <div class="page-content">
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="showModel('menu')"
        v-allow="'menu/add'"
      >
        新建
      </el-button>
    </el-row>

    <div class="table">
      <el-table
        lazy
        :data="tableData"
        style="width: 100%"
        row-key="id"
        size="medium"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{ color: '#666' }"
      >
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column prop="title_en" label="菜单名称（英）" />
        <el-table-column prop="menu_id" label="权限标识" />
        <el-table-column prop="path" label="路由" />

        <el-table-column fixed="right" label="操作" width="150px">
          <template>
            <el-button
              type="text"
              icon="el-icon-edit"
              v-allow="'menu/edit'"
              @click="showModel('menu')"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="el-btn-red"
              v-allow="'menu/delete'"
              @click="deleteMenu()"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="新建菜单" :visible.sync="dialogVisible" width="700px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="85px"
      >
        <template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称（英）" prop="title_en">
                <el-input v-model="ruleForm.title_en"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="ruleForm.path"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="权限标识" prop="menu_id">
                <el-input v-model="ruleForm.menu_id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图标" prop="menu_img">
                <el-input v-model="ruleForm.menu_img"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="父级ID" prop="parent_id">
                <el-input v-model="ruleForm.parent_id"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="菜单可见" prop="show">
                <el-switch v-model="ruleForm.show"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Select_Ds_MenuApi } from "@/api/userApi";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        title: "",
        title_en: "",
        path: "",
        menu_id: 0,
        menu_img: "",
        parent_id: 0,
        show: true
      },
      rules: {
        name: [
          // { required: true, message: '请输入活动名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    this.getdsmenudata();
  },
  methods: {
    getdsmenudata() {
      Select_Ds_MenuApi({}).then(res => {
        console.log(res.data);
        if (res.code == "0") {
          this.tableData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleChange() {},
    showModel(type) {
      this.dialogVisible = true;
      this.labelPosition = type;
    },
    // 删除菜单
    deleteMenu(item) {
      this.$confirm(`确定要删除吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {})
        .catch(() => {});
    },
    // 删除可操作权限
    deleteAllow(item) {
      this.$confirm(`确定要删除 ${item.name} ？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {})
        .catch(() => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .table {
    margin-top: 15px;
  }
}
</style>
